<template>
    <div class="registerfrom">
        <div class="rectangle">
            <!--logo框-->
            <div class="logo" style="display: flex;"> 
                <div style="display: flex: 1;font-size: 24px;margin-top: 10px;position: relative;left: 20px;color: #1ABC9C;">
                    数字迎新服务平台
                </div>
                <div style="display: flex: 1;font-size: 24px;margin-top: 10px;position: relative;left: 20px">
                     | 用户激活
                </div>
            </div>
            <!--序号框-->
            <div style="height: 86px;width: 80%;background-color: #f2f2f2;margin-left: 10%;margin-top: 17px;display: flex;"> 
              <!--第一个数字1-->
              <div style="width:95px">
                <div class="xuhao-blue" style="margin-left: 33px;">1</div>
                <div class="xuhao-zt-blue" style="margin-left: 22px;margin-top: 20px;">选择身份</div>
              </div>
              <!--线-->
              <div class="line-blue" style="margin-top: 23px; margin-left: -10px;"></div>
              <div class="line-grey" style="margin-top: 23px;"></div>
              <!--第二个数字2-->
              <div style="width:95px;margin-left: -31.5px;">
                <div class="xuhao-grey" style="margin-left: 33px;">2</div>
                <div class="xuhao-zt-grey" style="margin-left: 22px;margin-top: 20px;">校验信息</div>
              </div>
              <!--线-->
              <div class="line-grey" style="margin-top: 23px; margin-left: -10px;"></div>
              <div class="line-grey" style="margin-top: 23px;"></div>
              <!--第三个数字3-->
              <div style="width:95px;margin-left: -31.5px;">
                <div class="xuhao-grey" style="margin-left: 33px;">3</div>
                <div class="xuhao-zt-grey" style="margin-left: 22px;margin-top: 20px;">设置密码</div>
              </div>
              <!--线-->
              <div class="line-grey" style="margin-top: 23px; margin-left: -10px;"></div>
              <div class="line-grey" style="margin-top: 23px;"></div>
              <!--第四个数字4-->
              <div style="width:95px;margin-left: -31.5px;">
                <div class="xuhao-grey" style="margin-left: 33px;">4</div>
                <div class="xuhao-zt-grey" style="margin-left: 22px;margin-top: 20px;">激活成功</div>
              </div>
            </div>
        </div>
        <!--学生和教员框-->
        <div style="display: flex;" >
            <div @click="nextXS" class="juxing" style="display: flex：1;margin-left: 15%;margin-top: 5%;">
              <img  src="../../assets/register/xs.svg" alt="" style="width: 142px;margin-left: 111px;margin-top: 31px;">
            </div>

            <div @click="nextLS" class="juxing" style="display: flex：1;margin-left: 20%;margin-top: 5%;">
              <img src="../../assets/register/ls.svg" alt="" style="width: 142px;margin-left: 111px;margin-top: 31px;">
            </div>

        </div>

    </div>
    
    
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
function nextXS(){
    router.push({path:'/register1'})
}
function nextLS(){
    router.push({path:'/register2'})
}

</script>



<style scoped>
@import '../../assets/register/register.css';
.juxing {
      width: 364px;
      height: 258px;
      padding: 2px 2px 2px 2px;
      border-radius: 8px;
      border: 1px solid #797979;
      background-color: rgba(255, 255, 255, 0);
      box-sizing: border-box;
    }
    .juxing:hover {
      opacity: 0.2;
      background-color: #cccccc;
      box-sizing: border-box;
    }
    

</style>
